<template>
<el-header>/用户查看
</el-header>
  <el-main>
    <el-card>
        <el-row class="header" :gutter=20>
            <el-col :span=7>
            <el-input placeholder="请输入Id" clearable v-model="queryForm.userId">
            </el-input>
            
            </el-col>
            <el-button type="primary" :icon="Search" @click="loadData">查找</el-button>

        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.lable" v-for="(item,index) in options" :key="index" :sortable="item.sortable">
            
            </el-table-column>
        </el-table>
     

       
    </el-card>
  </el-main>
</template>



<script setup>

import { ref } from 'vue'
import { $userSearch } from "../../api/userapi.js";
import {options} from './commonoption'
import { Search} from '@element-plus/icons-vue'
const queryForm = ref({
 userId:""
  
});
const total=ref(0)
const tableData =ref([]) //这句话有问题
const tableDataS =ref([]) 
const loadData = async () => {
  
    tableData.value=tableDataS.value;
    console.log(queryForm.value,"commonuser");
    const test1={...queryForm.value};
    console.log(test1,"commonuser");
    if(test1.userId==""){
        const res = await $userSearch()
        console.log(res.data,"commonuser");
        total.value=res.data.length
        tableData.value=res.data;
        tableDataS.value=res.data;
    }else{
        console.log(queryForm.value,"commonuser");
        tableData.value=tableData.value.filter(item=>item.userId==test1.userId)        
        }




}
loadData()

const handleSizeChange=(pagesize)=>{
    queryForm.value.pagenum=1
    queryForm.value.pagesize=pagesize
    loadData()
}

const handleCurrentChange=(pageNum)=>{
    queryForm.value.pagenum=pageNum
    loadData()
}
</script>

<style lang="scss" scoped>
.header{
    padding-bottom: 16px;
    box-sizing: border-box;
}
</style>